<!DOCTYPE html>
<html>
<head>
    <title>用户信息</title>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/myCenter.css">
    <link rel="stylesheet" type="text/css" href="../css/pages.css">

</head>

<body>
<div class="col-md-12 col-xs-12 nopadding" style="padding-top:4rem;">
    <div class="col-md-3 col-xs-4 nopadding" style="margin-bottom:10px">

        <img id="userpic" class="userpic" src="" style="width: 50%;height: 50%;"/>
        <div class="col-md-12 col-xs-12 username">
            <a href="#" data-toggle="modal" data-target="#changePic">
                <span class="glyphicon glyphicon-pencil"></span>
                <span>修改头像</span>
            </a>
        </div>

    </div>
    <div class="col-md-6 col-xs-8 nopadding" style="border-left:1px solid gray;padding-left: 20px">
        <div class="col-md-12  col-xs-12" style="font-size: 1.5rem;margin-bottom: 10px;display: block" id="showInfodiv">
            <a href="#" id="showInfo">
                <span class="glyphicon glyphicon-pencil"></span>
                <span>修改信息</span>
            </a>
            <div class="fdata">
                <p>
                    <span>账号 Account ：</span>
                    <span class="value" id="account">用户名</span>
                    <a href="#" style="margin-left: 20px" data-toggle="modal" data-target="#changePwd">
                        <span class="glyphicon glyphicon-pencil"></span>
                        <span>修改密码</span>
                    </a>
                </p>
            </div>
            <div class="fdata">
                <p>
                    <span>工号 ID ：</span>
                    <span class="value" id="idnum"></span>
                </p>
            </div>
            <div class="fdata">
                <p>
                    <span>姓名 Name ：</span>
                    <span class="value" id="name"></span>
                </p>
            </div>
            <div class="fdata" id="showS" style="display: none">
                <p>
                    <span>底薪 Basic Salary ：</span>
                    <span class="value" id="salary"></span>
                </p>
            </div>
            <div class="fdata" id="showC" style="display: none">
                <p>
                    <span>提成 Commission ：</span>
                    <span class="value" id="commission"></span>
                </p>
            </div>
            <div class="fdata">
                <p>
                    <span>年龄 Age ：</span>
                    <span class="value" id="age"></span>
                </p>
            </div>
            <div class="fdata">
                <p>
                    <span>手机号 PhoneNumber ：</span>
                    <span class="value" id="phone"></span>
                </p>
            </div>
        </div>

        <div class="col-md-12 col-xs-12" style="font-size:1.5rem;margin-bottom: 10px;display: none" id="showAlterdiv">
            <a href="#" id="showAlter">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span>返回</span>
            </a>
            <form class="form-inline" style="margin-top: 10px">
                <div class="form-group alterinfo col-xs-12 col-md-12">姓名：
                    <label for="name">Name</label>
                    <input type="text" name="name" class="form-control" id="inputName">
                </div>
                <div class="form-group alterinfo col-xs-12 col-md-12">年龄：
                    <label for="age">Age</label>
                    <input type="text" name="age" class="form-control" id="inputAge">
                </div>
                <div class="form-group alterinfo col-xs-12 col-md-12">手机号：
                    <label for="phone">Phone</label>
                    <input type="text" name="phone" class="form-control" id="inputPhone">
                </div>
                <div class="form-group alterinfo col-xs-12 col-md-12">
                    <input type="button" id="alterInfoBtn" class="btn btn-success" value="确定"/>
                </div>
            </form>
        </div>


    </div>

</div>

</body>

<div class="modal fade" id="changePic" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改头像</h4>
            </div>
            <div class="modal-body">
                <script type="text/javascript">
                    function saveReport() {
                        $("#uploadProfile").ajaxSubmit(function (data) {
                            console.log(data);
                            if (data.code == 0)
                                alert("修改头像成功!");

                            else
                                alert("修改头像失败!");
                            window.location.reload();
                        });
                        return false;
                        //必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
                    }
                </script>
                <form action="../upFile/upload" method="post" enctype="multipart/form-data"
                      onsubmit="return saveReport()" id="uploadProfile">
                    <input type="text" name="userid" class="form-control" id="inputNone" style="display: none;">文件大小1M以内
                    <input id="inputFile" name="file" class="btn-file-molding" type="file"><br/>
                    <input type="submit" id="alterProfile" class="btn btn-success" value="修改头像"/>
                    <form>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="changePwd" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body" style="width: 80%;padding-left:20%">
                <div class="form-group alterinfo">请输入原密码：
                    <label for="oldPwd">oldPwd</label>
                    <input type="password" name="oldPwd" class="form-control" id="inputoldPwd">
                </div>
                <div class="form-group alterinfo">请输入新密码：
                    <label for="newPwd">newPwd</label>
                    <input type="password" name="newPwd" class="form-control" id="inputnewPwd">
                </div>
                <div class="form-group alterinfo">确认新密码：
                    <label for="renewPwd">newPwd</label>
                    <input type="password" name="renewPwd" class="form-control" id="inputrenewPwd">
                </div>
                <div class="form-group alterinfo">
                    <input type="button" id="alterPwdBtn" class="btn btn-success" value="确定"/>
                </div>
            </div>

        </div>
    </div>
</div>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-form.js"></script>
<script type="text/javascript" src="../js/all_infor.js"></script>